<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" />
    <div class="tool-box">
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="terrainExaggeration" :max="2" /></div> -->
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="relativeHeight" :max="10000" /></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="layerOptions" /></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="entityToolbarOptions" /></div>
        <div class="select-box-wrapper"><select-box :options="sizeOptions" /></div>
        <div class="select-box-wrapper"><a-checkbox v-model:checked="softShadows">soft shadows</a-checkbox></div>
        <div class="select-box-wrapper"><a-checkbox v-model:checked="terrainShadows">terrain shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="picking">选择</a-checkbox></div> -->
    </div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
import { PlayCircleOutlined, PauseCircleOutlined, PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons-vue';
import SelectBox from '@components/widgets/select-box';
import { G3V, g3a_odlines } from '@lib/g3x';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import {viewerMixin} from '@mixins';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers:[{
    dom: "cesium-viewer",
    name: "viewer1",
    title: "viewer#01",
    viewer:{
      imagery: { type: 'tileImagery', options: { "url": '//zzgis.com/cdn/3d/Assets/Textures/NaturalEarthII', "fileExtension": 'jpg', brightness: 1, show: true } },
      imageryProvider: null,
      // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      terrainProvider: null,
      shadows: false,
    },
    layers:[
      { type: 'tdtIboMap', options: { brightness: 1, show: true } },
      { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
      { type: 'darkMask', options: { brightness: 1, alpha: 0.85 } },
      { type: 'graticule', options: { brightness: 1, show: false } }
    ],
    globe: {
      // depthTestAgainstTerrain: false,
      // enableLighting: true //启用以太阳为光源的地球
    },
    navigation: {
      // defaultResetView: G3V.defaultViews.global.china.rectangle ,
      defaultResetView: null //flyHome
    },
    hideLayers: false,
  }],
};

export default defineComponent({
  name: 'airlines', // 航线
  components: { MousePosition, PlayCircleOutlined, PauseCircleOutlined, PlayCircleFilled, PauseCircleFilled, SelectBox, GlobeRotater, viewerSettingSidebar },
  setup() {
    return {};
  },
  data() {
    return {
      // viewer: null,
      g3v: null,
      _odlines: undefined
    };
  },
  computed: {
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    }
  },
  watch: {},
  mounted() {
    this.initViewer();
  },
  unmounted() {
    this._odlines && this._odlines.destroy();
    this._odlines = null;
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions,()=>{
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {},
    initEffects() {
      let vm = this;
      const viewer = this.viewer;
      var scene = viewer.scene;

      function loadData(dataFunc) {
        Cesium.Resource.fetchJson('//zzgis.com/cdn/3d/SampleData/earthSDK/odlines/flights.json').then(function(data) {
          //var timeDuration = 5.0;
          //var moveBaseDuration = 0.5;
          var timeDuration = 10.0;
          var moveBaseDuration = 4.0;

          var airports = data.airports.map(function(item) {
            return {
              coord: [item[3], item[4]]
            };
          });

          function getAirportCoord(idx) {
            return [data.airports[idx][3], data.airports[idx][4]];
          }

          // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
          var routesGroupByAirline = {};
          data.routes.forEach(function(route) {
            var airline = data.airlines[route[0]];
            var airlineName = airline[0];
            if (!routesGroupByAirline[airlineName]) {
              routesGroupByAirline[airlineName] = [];
            }
            routesGroupByAirline[airlineName].push(route);
          });

          var pointsData = [];
          data.routes.forEach(function(airline) {
            pointsData.push(getAirportCoord(airline[1]));
            pointsData.push(getAirportCoord(airline[2]));
          });

          var routes = routesGroupByAirline['Air China'];
          // routes.length = 1;
          console.log('ddd' + routes.length);

          var timeDuration = 10.0;
          var moveBaseDuration = 4.0;

          var routePaths = [];
          routes.forEach(function(route, index) {
            routePaths.push({
              startPos: airports[route[1]].coord.map(e => (e * Math.PI) / 180.0),
              endPos: airports[route[2]].coord.map(e => (e * Math.PI) / 180.0),
              heightRatio: 3.0, // 曲率，默认为1.0， 越大抬高越多
              width: 2.0,
              color: [0.8 * Math.random() + 0.2, 0.5 * Math.random() + 0.5, 0.1, 1.0],
              bgColor: [0.8, 0.8, 0.1, 0.2],
              bidirectional: 2,
              startTime: timeDuration * Math.random(),
              duration: moveBaseDuration + 10.0 * Math.random()
            });
          });

          dataFunc(routePaths, timeDuration);
        });
      }

      const _odlines = new g3a_odlines(viewer);

      loadData((data, timeDuration) => {
        console.log('loadData ...');
        _odlines.timeDuration = timeDuration;
        _odlines.color = [1, 1, 0, 1];
        _odlines.data = data;
        _odlines.playing = true;
      });

      this._odlines = _odlines;
    }
  }
});
</script>

<style lang="less">
.tool-box {
  position: absolute;
  top: 70px;
  left: 10px;
  z-index: 9;

  #menu {
    padding-top: 20px;
    button {
      background-color: rgba(0, 0, 0, 0.75);
      border-color: rgba(0, 0, 0, 0);
      cursor: pointer;
      transition: all 500ms;
      &:hover {
        opacity: 0.75;
      }
    }
  }

  .slider-box-wrapper {
    width: 18em;
    padding: 0 10px;
    background-color: rgba(0, 0, 0, 0.75);
    margin-bottom: 10px;
  }

  .select-box-wrapper {
    padding: 5px 15px;
    background-color: rgba(0, 0, 0, 0.75);
    margin-bottom: 10px;
    width: auto;
  }
}
</style>
